<template>
  <v-form v-model="valid" ref="PointForm">
    <v-text-field
      label="点名"
      v-model="point.name"
      :rules="[v => !!v || '点名不能空']"
      :counter="10"
      required
    />
    <v-text-field
      label="x"
      v-model="point.x"
      :rules="[v => v.length === 1 || 'qdx在XXX范围']"
      required
      mask="11"
    />
    <v-text-field
      label="y"
      v-model="point.y"
      :rules="[v => v.length === 1 || 'qdy在XXX范围']"
      required
      mask="11"
    />


    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">线图片：</span>
      </v-flex>
      <v-flex>
        <!--图片上传地址-->
        <v-upload
          v-model="point.image" url="/item/upload" :multiple="false" :pic-width="250" :pic-height="90"
        />
      </v-flex>
    </v-layout>
    <v-layout class="my-4">
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear" color="warning">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script type="es6">
  import config from '@/config';

  export default {
    name: "PointForm",
    props: {
      oldPoint: Object,
      isEdit: {
        type: Boolean,
        default: false
      },
      show: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        baseUrl: config.api,
        valid: false,
        point: {
          "name": "",
          "x": "",
          "y": "",
          "z": "",
          "iamge": ""
        },
        imageDialogVisible: false
      }
    },
    watch: {
      oldPoint: {
        deep: true,
        handler(val) {
          Object.deepCopy(val, this.line);
        }
      }
    },
    methods: {
      submit() {
        // 表单校验
        if (this.$refs.PointForm.validate()) {
          // 将数据提交到后台
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/item/point',
            data: this.$qs.stringify(this.point)
          }).then(() => {
            // 关闭窗口
            this.$message.success("保存成功！");
            this.closeWindow();
          }).catch(() => {
            this.$message.error("保存失败！");
          });
        }
      },
      clear() {
        // 重置表单
        this.$refs.PointForm.reset();
        this.categories = [];
      },
      // 图片上传出成功后操作
      handleImageSuccess(res) {
        this.point.image = res;
      },
      removeImage() {
        this.point.image = "";
      },
      closeWindow() {
        this.$emit("close");
      }
    }
  }
</script>

<style scoped>

</style>
